<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: #333; color: white; padding: 10px; font-size: 30px;">
        学生预约课程后台管理页面
        <el-button type="primary" round style="float: right;" plain size="large" @click="dialogVisible = true">
          退出
        </el-button>
        <el-dialog v-model="dialogVisible" title="退出登录" width="500" :before-close="handleClose">
          <span style="font-size: 20px;">您是否要退出登录？？？</span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="logout()">
                退出
              </el-button>
            </div>
          </template>
        </el-dialog>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
            default-active="2" text-color="#fff" @select="toPage">
            <el-menu-item index="/index">
              <el-icon>
                <HomeFilled />
              </el-icon>
              首页
            </el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Menu />
                </el-icon>
                <span>学生管理部分</span>
              </template>
              <el-menu-item index="/stu">
                <el-icon>
                  <User />
                </el-icon>
                学生管理
              </el-menu-item>
              <el-menu-item index="/dept">
                <el-icon>
                  <Memo />
                </el-icon>
                学院专业管理
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <Grid />
                </el-icon>
                <span>教师管理部分</span>
              </template>
              <el-menu-item index="/teach">
                <el-icon>
                  <Avatar />
                </el-icon>
                教师管理
              </el-menu-item>
              <el-menu-item index="/course">
                <el-icon>
                  <Memo />
                </el-icon>
                课程学生管理
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup>
import router from '@/router'
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import { ElNotification } from 'element-plus'
import { ElMessageBox } from 'element-plus'

import { useTokenStore } from '@/stores/token.js';//使用store
const tokenStore = useTokenStore();

const dialogVisible = ref(false)

//菜单激活时候实现跳转
function toPage(indexPath) {
  //编程式导航
  router.push(indexPath);
}
//退出
function logout() {
  //删除store中的token
  //sessionStorage.removeItem('token');
  tokenStore.$reset;
  //编程式导航
  router.push('/login');
  ElNotification({
    title: 'Success',
    message: '退出成功~~~',
    type: 'success',
  });
}
</script>
